<template>
	<view class="popup-container" v-if="visible">
		<view class="popup-mask" @click="close"></view>
		<view class="popup-page">
			<view class="popup-page-title" v-if="title && title != ''">
				{{title}}
			</view>
			<scroll-view class="popup-page-scroll" scroll-y>
				<!-- 分组类型列表 -->
				<view v-if="data.length>0 && data[0].group">
					<view class="group-item" v-for="(groupItem, index) in data" :key="index">
						<view class="item-type">{{groupItem.group}}</view>
						<view class="item" v-for="(item,index2) in groupItem.list" :key="index2"
							@click="clickItem(item)" @longpress="longPressItem(item)" @touchend="touchEnd"
							@touchmove="touchMove">
							<view class="item-label">
								<image class="item-label-icon" mode="aspectFit" :src="item.icon" v-if="item.icon">
								</image>
								<view :class="item.desc?'item-label-text':'item-label-text-nodesc'">{{ item.label }}
								</view>
							</view>
							<view :class="['item-desc', descClass !='' ? descClass:'']" v-if="item.desc">
								{{ item.desc }}
							</view>
						</view>
					</view>
				</view>
				<!-- 分组类型列表 end -->
				<!-- 不带分组类型列表 -->
				<view v-else>
					<view class="item" v-for="(item,index) in data" :key="index" @click="clickItem(item)"
						@longpress="longPressItem(item)" @touchend="touchEnd" @touchmove="touchMove">
						<view class="item-label">
							<image class="item-label-icon" mode="aspectFit" :src="item.icon" v-if="item.icon">
							</image>
							<view :class="item.desc?'item-label-text':'item-label-text-nodesc'">{{ item.label }}</view>
						</view>
						<view :class="['item-desc', descClass !='' ? descClass:'']" v-if="item.desc">
							{{ item.desc }}
						</view>
					</view>
				</view>
				<!-- 不带分组类型列表 end -->
			</scroll-view>
			<view class="popup-page-opt" v-if="optText != ''">
				<button class="optBtn" @click="clickOpt">{{optText}}</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	// 定义组件的 props
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		data: {
			type: Array,
			required: true,
			default: () => [],
		},
		optText: {
			type: String,
			default: ""
		},
		descClass: {
			type: String,
			default: ""
		},
		enableLongPress: {
			type: Boolean,
			default: false
		}
	});

	// 定义 emit 事件
	const emit = defineEmits(['click', 'longPress', 'clickOpt']);

	const visible = ref(false); // 控制弹窗的显示状态

	// 打开弹窗
	const open = () => {
		visible.value = true
	};

	// 关闭弹窗
	const close = () => {
		visible.value = false
	};

	let isLongPress = true

	/**
	 * 长按
	 */
	const longPressItem = (item) => {
		if (props.enableLongPress && isLongPress) {
			close()
			emit('longPress', item)
		}
	}

	/**
	 * 结束触摸时，恢复可长按
	 */
	const touchEnd = () => {
		isLongPress = true;
	}

	/**
	 * 触摸移动时，禁止长按
	 */
	const touchMove = (e) => {
		isLongPress = false;
	}

	/**
	 * 点击了item
	 */
	const clickItem = (item) => {
		close()
		emit('click', item)
	}

	// 点击了操作
	const clickOpt = () => {
		close()
		emit('clickOpt');
	}

	// 暴露方法给父组件
	defineExpose({
		open,
		close
	});
</script>

<style scoped>
	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.popup-page {
		position: absolute;
		margin: auto;
		width: 540rpx;
		border-radius: 30rpx;
		padding: 40rpx 50rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx 4rpx rgba(136, 136, 136, 0.2);
	}

	.popup-page-title {
		margin-bottom: 24rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.popup-page-scroll {
		width: 550rpx;
		max-height: 800rpx;
		overflow: hidden;
	}

	.popup-page-opt {
		margin-top: 30rpx;
	}

	.group-item {
		margin-bottom: 20rpx;
	}

	.item-type {
		margin-bottom: 12rpx;
		font-size: 24rpx;
		color: #666;
	}

	.item {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 30rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 40rpx;
	}

	.item:active {
		background-color: rgba(200, 255, 200, 0.5);
	}

	.item-label {
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
		gap: 16rpx;
	}

	.item-label-icon {
		width: 46rpx;
		height: 46rpx;
	}

	.item-label-text {
		width: 220rpx;
		font-size: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #333333;
	}

	.item-label-text-nodesc {
		width: 430rpx;
		font-size: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #333333;
	}

	.item-desc {
		flex: 1;
		font-size: 30rpx;
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #333333;
	}

	.optBtn {
		width: 200rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		background: transparent;
		color: #157906;
		border: none;
	}
</style>